<template>
  <div class="zss-registry zss-login">
    <div class="flex jc zss-body-h">
      <div class="flex login-body">
        <div class="login-bg flex">
          <Form ref="registry" :model="formData" :rules="rules">
            <FormItem prop="username">
              <Input v-model="formData.username" placeholder="账号"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="password">
              <Input v-model="formData.password" password placeholder="密码"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="name">
              <Input v-model="formData.name" placeholder="真实姓名"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="mobile">
              <Input v-model="formData.mobile" placeholder="手机号"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="sex">
              <RadioGroup v-model="formData.sex">
                <Radio :label="1">
                  <span>男</span>
                </Radio>
                <Radio :label="2">
                  <span>女</span>
                </Radio>
              </RadioGroup>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem>
              <Input v-model="formData.email" type="email" placeholder="邮箱"></Input>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem prop="age">
              <DatePicker
                v-model="formData.age"
                format="yyyy-MM-dd"
                type="date"
                show-week-numbers
                placeholder="出生年-月-日"
              ></DatePicker>
            </FormItem>
            <div class="login-divider fr"></div>
            <FormItem>
              <Input v-model="formData.job" placeholder="职业"></Input>
            </FormItem>
          </Form>
        </div>
        <div class="flex btn">
          <Button type="info" class="mt20" @click="$router.push('/')">去登陆</Button>
          <Button type="info" class="mt20" @click="toRegistry">注册</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { sysRegistry } from 'api/api.ts'
@Component
export default class Registry extends Vue {
  private formData = {
    name: '',
    mobile: '',
    sex: 1,
    email: '',
    age: new Date(),
    password: '',
    username: '',
    job: '',
    companyId: 0
  }
  private rules = {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      {
        validator: (rule: object, value: string, callback: Function) => {
          if (/^[\u4e00-\u9fa5]+$/g.test(value)) {
            callback(new Error('账户由字母和数字组成'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      {
        validator: (rule: object, value: string, callback: Function) => {
          if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(value)) {
            callback()
          } else {
            callback(new Error('密码由字母和数字组成，长度为8-20字符'))
          }
        },
        trigger: 'blur'
      }
    ],
    name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    age: [{ required: true, type: 'date', message: '请选择生日日期', trigger: 'blur' }],
    mobile: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      {
        validator: (rule: object, value: string, callback: Function) => {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback()
          } else {
            callback(new Error('手机号格式错误'))
          }
        },
        trigger: 'blur'
      }
    ]
  }

  private toRegistry() {
    const form: any = this.$refs['registry']
    form.validate((v: boolean) => {
      if (v) {
        const p = JSON.parse(JSON.stringify(this.formData))
        p.age = Math.floor(this.formData.age.getTime() / 1000)
        sysRegistry(p).then((res: Result) => {
          if (res.status) {
            this.$Message.success('注册成功，请登录')
            this.$router.push('/')
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    })
  }
}
</script>
<style lang="less">
@import './login.less';
</style>
